<template>
  <div class="like">
    
    <ul>
        <li v-for="(item, index) in likeList" :key="index"
        @click="goDetail(item.g_id)">
            <h2>
                <img :src="item.imgUrl" alt="">
            </h2>
            <h3>{{ item.g_name }}</h3>
            <div>
                <span>￥</span>
                <b>{{item.g_price}}</b>
            </div>
        </li>
    </ul>

  </div>
</template>

<script>
import {getGoods} from "@/api/goods/getgoods"


export default {
    data(){
        return{
            likeList:[]
        }
    },
    created() {
        this.getLikeList()
    },


    methods:{
        goDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}})
            window.scrollTo(0, 0);
        },

        async getLikeList() {
            const res = await getGoods()
            console.log(res);
            
            if (res.status === 200){
                this.likeList = res.data
            }else{
                console.log("获取推荐商品失败")
            }
        }
    }
}
</script>

<style scoped>
.like{
    margin-top: 40px;
    margin-bottom: 60px;
}
.like img{
    width: 176px;
    height: 176px;
}
.like ul{
    display: flex;
    flex-wrap: wrap;
    
}
.like li{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.like li > div{
    text-align: left;
    width: 82%;
    padding-top: 2px;
    padding-bottom: 22px;
    
}
.like li > div span{
    font-size: 16px;
}
.like li > div b{
    font-weight: 600;
    font-size: 18px;
    color: rgb(216, 22, 22);
}
.like h3{
    padding: 0 6px;
    width: 80%;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



</style>